$(function() {
    $.busyLoadSetup({
        animation: "slide",
        background: "rgba(255, 152, 0, 0.86)"
    });
    let showHide = (event, tag, options = {}) => {
        event.preventDefault();
        event.stopPropagation();
        $(tag).busyLoad("show", options);
        $(tag).click(".busy-load-container", function() {
            $(tag).busyLoad("hide");
        });
    }
    // fullscreen
    $('.btn-fullscreen').click(function() {
        $.busyLoadFull('show', {
            background: "rgba(0, 51, 101, 0.83)",
            image: "tardis",
            animation: "slide"
        });
        $("body>.busy-load-container").click(function() {
            $.busyLoadFull('hide', {
                animation: "fade"
            });
        });
    })
    // spinners
    $(".spinner-01").click(function(e) {
        showHide(e, "#spinner-01");
    });
    $(".spinner-02").click(function(e) {
        showHide(e, "#spinner-02", {
            spinner: "accordion"
        });
    });
    $(".spinner-03").click(function(e) {
        showHide(e, "#spinner-03", {
            spinner: "pulsar"
        });
    });
    $(".spinner-04").click(function(e) {
        showHide(e, "#spinner-04", {
            spinner: "cube"
        });
    });
    $(".spinner-05").click(function(e) {
        showHide(e, "#spinner-05", {
            spinner: "cubes"
        });
    });
    $(".spinner-06").click(function(e) {
        showHide(e, "#spinner-06", {
            spinner: "circle-line"
        });
    });
    $(".spinner-07").click(function(e) {
        showHide(e, "#spinner-07", {
            spinner: "circles"
        });
    });
    $(".spinner-08").click(function(e) {
        showHide(e, "#spinner-08", {
            spinner: "cube-grid"
        });
    });
    // image
    $(".img-01").click(function(e) {
        showHide(e, "#img-01", {
            background: "rgba(76, 175, 80, 0.73)",
            image: ""
        });
    });
    $(".img-02").click(function(e) {
        showHide(e, "#img-02", {
            background: "rgba(0, 51, 101, 0.83)",
            image: "tardis"
        });
    });
    // fontawesome
    $(".fawe-01").click(function(e) {
        showHide(e, "#fawe-01", {
            fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"
        });
    });
    $(".fawe-02").click(function(e) {
        showHide(e, "#fawe-02", {
            fontawesome: "fa fa-cog fa-spin fa-3x fa-fw"
        });
    });
    // custom 
    let count = 2121;
    let customElement = $("<div>", {
        id: "countdown",
        css: {
            "font-size": "50px"
        },
        text: count
    });
    $(".custom-01").click(function(e) {
        showHide(e, "#custom-01", {
            background: "brown",
            custom: customElement
        });
    });
    let interval = setInterval(function() {
        count--;
        customElement.text(count);
        if (count <= 0) {
            clearInterval(interval);
            $("#custom-01").busyLoad("hide");
            return;
        }
    }, 1000);
    // size
    $(".size-01").click(function(e) {
        showHide(e, "#size-01", {
            maxSize: "150px",
            minSize: "150px"
        });
    });
    $(".size-02").click(function(e) {
        showHide(e, "#size-02", {
            maxSize: "200px",
            minSize: "200px",
            background: "rgba(0, 51, 101, 0.83)",
            image: "tardis"
        });
    });
    // text
    $(".text-01").click(function(e) {
        showHide(e, "#text-01", {
            text: "LOADING ..."
        });
    });
    $(".text-02").click(function(e) {
        showHide(e, "#text-02", {
            text: "LOADING ...",
            spinner: false
        });
    });
    $(".text-03").click(function(e) {
        showHide(e, "#text-03", {
            text: "LOADING ...",
            textPosition: "left"
        });
    });
    $(".text-04").click(function(e) {
        showHide(e, "#text-04", {
            text: "LOADING ...",
            textPosition: "right"
        });
    });
    $(".text-05").click(function(e) {
        showHide(e, "#text-05", {
            text: "LOADING ...",
            textPosition: "top"
        });
    });
    $(".text-06").click(function(e) {
        showHide(e, "#text-06", {
            text: "LOADING ...",
            textPosition: "bottom"
        });
    });
    $(".text-07").click(function(e) {
        showHide(e, "#text-07", {
            text: "LOADING ...",
            textColor: "white",
            color: "red",
            background: "brown"
        });
    });
    $(".text-08").click(function(e) {
        showHide(e, "#text-08", {
            text: "LOADING ...",
            textMargin: "3rem"
        });
    });
    $(".text-09").click(function(e) {
        showHide(e, "#text-09", {
            text: "LOADING ...",
            fontSize: "2rem"
        });
    });
    // animation
    $(".animation-01").click(function(e) {
        showHide(e, "#animation-01", {
            animation: false
        });
    });
    $(".animation-02").click(function(e) {
        showHide(e, "#animation-02", {
            animation: "fade"
        });
    });
    $(".animation-03").click(function(e) {
        showHide(e, "#animation-03", {
            animation: "slide"
        });
    });
    $(".animation-04").click(function(e) {
        showHide(e, "#animation-04", {
            animation: "fade",
            animationDuration: "slow"
        });
    });
    $(".animation-05").click(function(e) {
        showHide(e, "#animation-05", {
            animation: "fade",
            animationDuration: 4000
        });
    });
    // classes
    $(".class-01").click(function(e) {
        showHide(e, "#class-01", {
            containerClass: "my-own-container-class"
        });
    });
    $(".class-02").click(function(e) {
        showHide(e, "#class-02", {
            containerItemClass: "my-own-container-item-class"
        });
    });
    $(".class-03").click(function(e) {
        showHide(e, "#class-03", {
            spinnerClass: "my-own-spinner-class"
        });
    });
    $(".class-04").click(function(e) {
        showHide(e, "#class-04", {
            text: "LOADING ...",
            textClass: "my-own-text-class"
        });
    });

    // static
    $(".static-01").click(function(e) {
        showHide(e, "#static-01");
    });
});